<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        输入：<input type="text" v-model="msg">
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                {{item.q}}
            </li>
        </ul>
    </div>
    <script>
        const VM = new Vue({
            el: "#app",
            data: {
               msg:'成龙',
               arr:[]
            },
            watch:{
                
                msg:{
                    immediate:true,
                    handler(){
                        
                        window.cb = (data)=>{
                            // console.log(data);
                            this.arr = data.g;
                        }
                        let script = document.createElement('script');
                        script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35838,36174,31253,35915,36165,34584,36140,36120,36192,36073,35802,35318,26350,35870,36103,36061&wd=${this.msg}&req=2&bs=1&pbs=1&csor=1&pwd=1&cb=cb`;
                        // document.
                        document.documentElement.appendChild(script);
                        document.documentElement.removeChild(script);
                    }
                }
            }
        });
    </script>
</body>

</html>

<!-- 



    https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35838,36174,31253,35915,36165,34584,36140,36120,36192,36073,35802,35318,26350,35870,36103,36061&wd=nba&req=2&bs=1&pbs=1&csor=1&pwd=1&cb=cb
 -->